home *** CD-ROM | disk | FTP | other *** search
/ Programming a Multiplayer FPS in DirectX / Programming a Multiplayer FPS in DirectX (Companion CD).iso / DirectX / dxsdk_oct2004.exe / dxsdk.exe / Documentation / DirectX9 / directx9_m.chm / directx / code / members.js < prev    next >
Encoding:
Text File  |  2004-09-30  |  17.2 KB  |  488 lines
  1.  
  2. var gsTabControl="";
  3. var gaDivs = new Array();
  4. var gaTabs = new Array();
  5. var goPersist = null;        // creation of this object is defered until after the entire objectmembers system
  6.                             // has been rendered.  That is because I need a reference to content div.
  7. var gsPageId = "";
  8.  
  9. function CPersist(attachedTo, storePath){
  10.     if( oBD.doesPersistence ){
  11.         this._obj = attachedTo;
  12.         this._obj.addBehavior("#default#userData");
  13.         this._path = storePath;
  14.         this._loaded = false;
  15.     }
  16. }
  17.  
  18. CPersist.prototype.Save = function(){
  19.     if( oBD.doesPersistence ){
  20.         if(this.IsLoaded()){
  21.             var enabled = true;
  22.             var code = "try{ this.GetAttached().save(this._path); } catch(e) {enabled = false;}";
  23.             eval(code);
  24.         }
  25.     }
  26. }
  27.  
  28. CPersist.prototype.Load = function(){
  29.     if( oBD.doesPersistence ){
  30.         if(!this.IsLoaded()){
  31.             var enabled = true;
  32.             var code = "try{ this.GetAttached().load(this._path); } catch(e) {enabled = false;}";
  33.             eval(code);
  34.             
  35.             if(!enabled) return;
  36.             
  37.             this._loaded = true;
  38.         }
  39.     }
  40. }
  41.  
  42. CPersist.prototype.GetAttached = function(){
  43.     if( oBD.doesPersistence ) return this._obj;
  44. }
  45.  
  46. CPersist.prototype.IsLoaded = function(){
  47.     if( oBD.doesPersistence ) return this._loaded;
  48. }
  49.  
  50. CPersist.prototype.SetAttribute = function(key, value){
  51.     if( oBD.doesPersistence ){
  52.         if( !this.IsLoaded() ) this.Load();
  53.  
  54.         if( this.IsLoaded() ){            // confirm that the load actually happened.  Cannot add data if load failed.
  55.             if( !gsPageId ) pageID = "unknown"; else pageID = gsPageId;    
  56.             this.GetAttached().setAttribute(pageID + "." + key, value);
  57.         }
  58.         
  59.         this.Save();
  60.     }
  61. }
  62.  
  63. CPersist.prototype.GetAttribute = function(key){
  64.     if( oBD.doesPersistence ){
  65.         if( !this.IsLoaded() ) this.Load();
  66.  
  67.         if( this.IsLoaded() ){            // confirm that the load actually happened.  Cannot get data if load failed.
  68.             if( !gsPageId ) pageID = "unknown"; else pageID = gsPageId;    
  69.             var value = this.GetAttached().getAttribute(pageID + "." + key);
  70.         }
  71.     
  72.         if(key == "selectedTab"){
  73.             if(!value) value = 0;
  74.         } else if(key == "expanded"){
  75.             if(value == "true")
  76.                 value = true;
  77.             else
  78.                 value = false;
  79.         } else if(key == "scroll"){
  80.             if(!value) value = 0;
  81.         }
  82.     
  83.         return value;
  84.     }
  85. }
  86.  
  87. //
  88. // initilizes a new, logical tab for objectmembers.  A "tab" consists of both
  89. // the tab and the member content.
  90. //
  91. function CTabber(newTab){
  92.     this._caption = ""; this._content = null; this._tab = null;
  93.  
  94.     // only initialize of this is actually a tab.  Tabs are identifed by a @tabName attribute.
  95.     if(newTab.tabName){
  96.         this._initializeComponent(newTab);
  97.     } else {
  98.         return null;
  99.     }
  100. }
  101.  
  102. //
  103. // Returns the caption used for the tab.
  104. //
  105. CTabber.prototype.GetCaption = function(){
  106.     return this._caption;
  107. }
  108.  
  109. //
  110. // Sets the caption used for the tab.  Also updates the tabbed title bar.
  111. //
  112. CTabber.prototype.SetCaption = function(newCaption){
  113.     this._caption = newCaption;
  114.     
  115.     if(this.IsActive){        // should only change title bar if currently active.
  116.         oMTitle.innerText = newCaption;
  117.     }
  118. }
  119.  
  120. // 
  121. // Returns the <div> that is attached to this tab object.
  122. //
  123. CTabber.prototype.GetContent = function(){
  124.     return this._content;
  125. }
  126.  
  127. //
  128. // Returns the rendered tab (<TD>) for this tab object.
  129. //
  130. CTabber.prototype.GetTab = function(){
  131.     return this._tab;
  132. }
  133.  
  134. //
  135. // Returns true if this tab object is currently being rendered (e.g. the <div> is displayed),
  136. // otherwise returns false.
  137. //
  138. CTabber.prototype.IsActive = function(){
  139.     return (this.GetTab().className == "oMTabOn" ? true : false);
  140. }
  141.  
  142. //
  143. // Not used, ignore.
  144. //
  145. CTabber.prototype._setColumnHeaders = function(){
  146.     var heads = this.GetContent().getElementsByTagName("TH");
  147.     for(var i=0; i<heads.length; i++){
  148.         var cn = heads[i].cloneNode(true);
  149.         oMHeadings.appendChild(cn);
  150.         heads[i].style.display = "none";
  151.     }
  152. }
  153.  
  154. // 
  155. // Forces a an inactive tab to become active.  That means that the 
  156. // tab itself changes state and the <div> is rendered.
  157. //
  158. // Any previously active tab is made inactive first.
  159. //
  160. CTabber.prototype.MakeActive = function(){
  161.     var tab = this.GetActiveTab();
  162.     if(tab) tab.MakeInActive();
  163.  
  164.     oMTitle.innerText = this.GetCaption();
  165.     this.GetTab().className = "oMTabOn";
  166.     oMTData.appendChild(this.GetContent());
  167.     this.GetContent().style.display = "block";
  168.     this.SetScrollPosition(0);        // reset the scroll bar.
  169.     oMTData.scrollTop = this.GetScrollPosition();
  170.     
  171.     // save the state to a userData store.
  172.     goPersist.SetAttribute("selectedTab", this.GetCaption());
  173. }
  174.  
  175. CTabber.prototype.GetActiveTab  = function(){
  176.     for(var i=0; i<gaTabs.length; i++){
  177.         var tab = gaTabs[i];
  178.         if(tab.IsActive()) return tab;
  179.     }
  180. }
  181.  
  182. //
  183. // Forces an active tab to become inactive.  Changes the state of the tab
  184. // and removes the <div> from the screen.
  185. //
  186. CTabber.prototype.MakeInActive = function(){
  187.     this.GetContent().style.display = "none";
  188.     this.GetTab().className = "oMTab";
  189.     oMTitle.innerText = "";
  190. }
  191.  
  192. //
  193. // Event for when the mouse moves over the tab button.
  194. //
  195. CTabber.prototype.OnMouseHover = function(){
  196.     if(!this.IsActive())        // should only run event if not already active.
  197.         this.GetTab().className = "oMTabHover";
  198. }
  199.  
  200. //
  201. // Event for when the user clicks the tab button.
  202. //
  203. CTabber.prototype.OnMouseClick = function(){
  204.     if(!this.IsActive()){        // should only run event if not already active.
  205.         this.MakeActive();
  206.     }
  207. }
  208.  
  209. //
  210. // Event for when the user moves the mouse from within the tab button area.
  211. //
  212. CTabber.prototype.OnMouseFlee = function(){
  213.     if(!this.IsActive())        // should only run event if not alreay active.
  214.         this.GetTab().className = "oMTab";
  215. }
  216.  
  217. // 
  218. // Returns the scroll position for the <div> associated with this tab object.
  219. //
  220. CTabber.prototype.GetScrollPosition = function(){
  221.     this._scroll;
  222. }
  223.  
  224. //
  225. // Sets the scroll position for the <div> associated with this tab object.
  226. //
  227. CTabber.prototype.SetScrollPosition = function(newValue){
  228.     this._scroll = newValue;
  229.     
  230.     if(this.IsActive()) oMTData.scrollTop = newValue;
  231.     
  232.     goPersist.SetAttribute("scroll", newValue);
  233.     goPersist.Save();
  234. }
  235.  
  236. //
  237. // Initializes the state of the tab.  This includes creating the physical tab
  238. // as well as associated a <div> with it.
  239. //
  240. CTabber.prototype._initializeComponent = function(newTab){
  241.     this._caption = newTab.tabName;            // the name used for the tab.
  242.     this._content = newTab;                    // the <div> that contains the tabbed data.
  243.     this._scroll = 0;                        // position of the scroll bar.
  244.  
  245.     // prepare the tab for use.  Create the necessary structure.
  246.     this._tab = document.createElement("TD");
  247.     this._tab.onmouseover = onMouseOverRedirect;
  248.     this._tab.onmouseout = onMouseOutRedirect;
  249.     this._tab.onmousedown = onMouseClickRedirect;
  250.     this._tab.onkeypress = onMouseClickRedirect;
  251.     this._tab.onclick = onMouseClickRedirect;
  252.     this._tab.title = this.GetCaption();
  253.     this._tab.className = "oMTab";
  254.     this._tab.tabIndex = "0";
  255.     this._tab.innerText = this.GetCaption();
  256.     this._tab.tab = this;                    // simply attachs a reference to this tab object onto the <TD>.
  257.     this.GetContent().tab = this;
  258. }
  259.  
  260. //
  261. // functions that dispatch the event to the correct handler.  This is done because
  262. // when an event fires, there is no way for the system to know which user-defined
  263. // object (CTabber) is being invoked.  The <TD> has a reference to the owning tab object
  264. // so that the event can be invoked on the correct object.
  265. //
  266. function onMouseOverRedirect(){
  267.     this.tab.OnMouseHover();
  268. }
  269.  
  270. function onMouseOutRedirect(){
  271.     this.tab.OnMouseFlee();
  272. }
  273.  
  274. function onMouseClickRedirect(){
  275.     this.tab.OnMouseClick();
  276. }
  277. //---------------------------------------------------------------------------------------
  278.  
  279.  
  280. function expand_onclick_handler(){
  281.     toggleExpandDataView();
  282. }
  283.  
  284. function filter_onchange_handler(){
  285.     var oFilter = document.getElementById("oChangeInheritFilter");
  286.     if(oFilter != null){
  287.         pos = oFilter.selectedIndex;
  288.         option = oFilter.options(pos);
  289.         decidedView = option.value;
  290.         switchInheritedView(decidedView);
  291.     }
  292. }
  293.  
  294. function scroll_onscroll_handler(){
  295.     gaTabs[0].GetActiveTab().SetScrollPosition(oMTData.scrollTop);
  296. }
  297.  
  298. function switchInheritedView(toggleTo){
  299.     tabs = gaTabs;
  300.     
  301.     for(i=0; i<tabs.length; i++){
  302.         rows = tabs[i].GetContent().getElementsByTagName("TR");
  303.  
  304.         for(j=1; j<rows.length; j++){
  305.             row = rows[j];
  306.             isInherited = (row.getAttribute("inherited") != null ? true : false);
  307.  
  308.             switch(toggleTo){
  309.                 case "inherited":
  310.                     if(isInherited)
  311.                         row.style.display = "block";
  312.                     else
  313.                         row.style.display = "none";
  314.                     break;
  315.                 case "declared":
  316.                     if(isInherited)
  317.                         row.style.display = "none";
  318.                     else
  319.                         row.style.display = "block";
  320.                     break;
  321.                 default:
  322.                     row.style.display = "block";
  323.                     break;
  324.             }
  325.         }
  326.     }
  327. }
  328.  
  329. //
  330. // Expands or collapses the list based on the interaction with the expand/collapse glyph.
  331. //
  332. function toggleExpandDataView(){
  333.     var oCollapse = document.getElementById("oCollapso");
  334.     if(oCollapse != null){
  335.         if(oCollapse.state == "collapsed"){
  336.             // the state is collapase so force environment to be expanded.
  337.             oCollapse.title = "Collapse";
  338.             oMTData.style.overflow = "visible";
  339.             oCollapse.src = gsGraphicsPath + "UI_OM_collapse.gif";
  340.             oCollapse.state = "expanded";
  341.         
  342.             // now that the view is being expanded, must save this state.
  343.             goPersist.SetAttribute("expanded", "true");
  344.         } else {
  345.             // the state is expanded so force environment to be expanded.
  346.             oCollapse.title = "Expand";
  347.             oMTData.style.overflow = "auto";
  348.             oCollapse.src = gsGraphicsPath + "UI_OM_expand.gif";
  349.             oCollapse.state = "collapsed";
  350.  
  351.             // now that the view is being collapsed, must remove expanded state.
  352.             goPersist.SetAttribute("expanded", "false");
  353.         }
  354.     }
  355. }
  356.  
  357. function initTabbedMembers()
  358. {
  359.     if(document.getElementById("oMT")){
  360.         var mshaid = document.all("MS-HAID");        // need to get the topic id for this page.
  361.         if(mshaid) gsPageId = mshaid.getAttribute("content");
  362.  
  363.         locateAvailableTabs();                // assembly an array of all the divs that are tabs.
  364.  
  365.         divscol=document.all.tags("div");
  366.         divsize=divscol.length;
  367.         if (divsize>0)
  368.         {
  369.             oMTExplanation.style.display = "block";
  370.             gsTabControl=''
  371.             // this defines the tabbed title bar.
  372.             gsTabControl=gsTabControl+'<TABLE class="oMembersTable" border="0" cellpadding="0" cellspacing="0" style="border-colapse:collapse" bordercolor="#111111" width="90%">';
  373.             gsTabControl=gsTabControl+'    <STYLE>';
  374.             gsTabControl=gsTabControl+'        .oMembersTable    {fount-family:verdana; font-size:70%}';
  375.             gsTabControl=gsTabControl+'        TD                {font-family:verdana; font-size:70%}';
  376.             gsTabControl=gsTabControl+'        .oMTab            {background:#eeeeee; width:100%; height:20px; border-top=1px solid #6699cc; padding:7px; padding-left:7px; cursor:hand;}';
  377.             gsTabControl=gsTabControl+'        .oMTabOn        {background:#999999; width:100%; height:20px; color:#ffffff; border-top:1px groove white; padding:7px; padding-left:7px; cursor:hand;}';
  378.             gsTabControl=gsTabControl+'        .oMTabHover        {background:#dddddd; width:100%; height:20px; border-top=1px solid #6699cc; padding:7px; padding-left:7px; cursor:hand;}';
  379.             gsTabControl=gsTabControl+'    </STYLE>';
  380.             gsTabControl=gsTabControl+'    <TR>';
  381.             gsTabControl=gsTabControl+'        <TD width="100%" bgcolor="#6699cc">';
  382.             gsTabControl=gsTabControl+'            <TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#111111" width="100%" id="AutoNumber4">';
  383.             gsTabControl=gsTabControl+'                <TR>';
  384.             gsTabControl=gsTabControl+'                    <TD width="4" height="25px" style="background-image:url(\'' + gsGraphicsPath + 'UI_OM_top_left_corner.gif\'); background-repeat:no-repeat"> </TD>';
  385.             gsTabControl=gsTabControl+'                    <TD width="*" height="25px">';
  386.             gsTabControl=gsTabControl+'                        <DIV id="oMTitle" style="color:white; font-weight:bold; font-size:11pt; font-family:arial"> </DIV>';
  387.             gsTabControl=gsTabControl+'                    </TD>';
  388.             gsTabControl=gsTabControl+'                    <TD width="1">';
  389.             gsTabControl=gsTabControl+'                        <SELECT id="oChangeInheritFilter" NAME="Filter" onchange="filter_onchange_handler();">';
  390.             gsTabControl=gsTabControl+'                        <OPTION VALUE="all">Show All</OPTION>';
  391.             gsTabControl=gsTabControl+'                        <OPTION VALUE="inherited">Show Inherited</OPTION>';
  392.             gsTabControl=gsTabControl+'                        <OPTION VALUE="declared">Show Declared</OPTION>';
  393.             gsTabControl=gsTabControl+'                        </SELECT>';
  394.             gsTabControl=gsTabControl+'                    </TD>';
  395.             gsTabControl=gsTabControl+'                    <TD width="25" height="25px" style="padding-top:2px">';
  396.             gsTabControl=gsTabControl+'                        <IMG id="oCollapso" src="' + gsGraphicsPath + 'UI_OM_expand.gif" onclick="expand_onclick_handler();" title="Expand" state="collapsed" style="cursor:hand" width="21 height="18">';
  397.             gsTabControl=gsTabControl+'                    </TD>';
  398.             gsTabControl=gsTabControl+'                    <TD width="4" height="25px" style="background-image:url(\'' + gsGraphicsPath + 'UI_OM_top_right_corner.gif\'); background-repeat:no-repeat; background-position:top right;"> </TD>';
  399.             gsTabControl=gsTabControl+'                </TR>';
  400.             gsTabControl=gsTabControl+'            </TABLE>';
  401.             gsTabControl=gsTabControl+'        </TD>';
  402.             gsTabControl=gsTabControl+'    </TR>';
  403.             
  404.             gsTabControl=gsTabControl+'    <TR>';
  405.             gsTabControl=gsTabControl+'        <TD width="100%">';
  406.             gsTabControl=gsTabControl+'            <TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#111111" width="100%">';
  407.             gsTabControl=gsTabControl+'                <TR>';
  408.             gsTabControl=gsTabControl+'                    <TD width="95px" style="padding:5px; padding-top:0px; background:#eeeeee; border-top:1px solid white; border-left:1px solid #6699cc; border-bottom:1px solid #6699cc; border-right:4px solid #6699cc" valign="top">';
  409.             gsTabControl=gsTabControl+'                        <TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#111111" width="100%">';
  410.             gsTabControl=gsTabControl+'                            <TBODY id="oMTabberList">';
  411.             gsTabControl=gsTabControl+'                                <TR>';
  412.             gsTabControl=gsTabControl+'                                    <TD width="100%"  height="20px" bgcolor="#eeeeee" style="padding-left:2px;"><B>Show:</B></TD>';
  413.             gsTabControl=gsTabControl+'                                </TR>';
  414.             //
  415.             // the tabs will be dynamically built later based on the <div> content.
  416.             //
  417.             gsTabControl=gsTabControl+'                            </TBODY>';
  418.             gsTabControl=gsTabControl+'                        </TABLE>';
  419.             gsTabControl=gsTabControl+'                    </TD>';
  420.             gsTabControl=gsTabControl+'                    <TD width="*" valign="top" style="border-right:1px solid #6699cc; border-bottom:1px solid #6699cc" id="oMTabberContent">';
  421.             gsTabControl=gsTabControl+'                        <TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" height="100%" width="100%>';
  422.             gsTabControl=gsTabControl+'                            <TR>';
  423.             gsTabControl=gsTabControl+'                                <TD height="20" width="100%" bgcolor="#dddddd" style="border-collapse:collapse" bordercolor="#111111" height="100%">';
  424.             gsTabControl=gsTabControl+'                                    <TABLE border="0" cellpadding="0" cellspaceing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">';
  425.             gsTabControl=gsTabControl+'                                        <TR>';
  426.             gsTabControl=gsTabControl+'                                            <TD width="100%" height="*">';
  427.             gsTabControl=gsTabControl+'                                                <DIV id="oMTData" onscroll="scroll_onscroll_handler();" style="height:255px; overflow:auto; overflow-x:hidden;"></DIV>';
  428.             gsTabControl=gsTabControl+'                                            </TD>';
  429.             gsTabControl=gsTabControl+'                                        </TR>';
  430.             gsTabControl=gsTabControl+'                                    </TABLE>';
  431.             gsTabControl=gsTabControl+'                                </TD>';
  432.             gsTabControl=gsTabControl+'                            </TR>';
  433.             gsTabControl=gsTabControl+'                        </TABLE>';
  434.             //
  435.             // the actual member links appear here based on the selected tabs.
  436.             //
  437.             gsTabControl=gsTabControl+'                    </TD>';
  438.             gsTabControl=gsTabControl+'                </TR>';
  439.             gsTabControl=gsTabControl+'            </TABLE>';
  440.             gsTabControl=gsTabControl+'        </TD>';
  441.             gsTabControl=gsTabControl+'    </TR>';
  442.             gsTabControl=gsTabControl+'</TABLE>';
  443.  
  444.             oMT.insertAdjacentHTML("beforeBegin", gsTabControl);    // renders the initial, constant, content.
  445.             goPersist = new CPersist(oMTData, gsStoreName);        // now I create the instance.
  446.             
  447.             // cycles through all the tabs and renders the tab buttons.
  448.             for(var i=0; i<gaTabs.length; i++){
  449.                 var tab = gaTabs[i];
  450.                 var tr = document.createElement("TR");
  451.                     tr.appendChild(tab.GetTab());
  452.                     
  453.                 oMTabberList.appendChild(tr);
  454.             }
  455.             
  456.             // determine the initial tab to display.  If there is persistent
  457.             // information, they use that, otherwise, just use the first
  458.             // tab in the list.
  459.             restoreInitState()
  460.         }
  461.     }
  462. }
  463.  
  464. //
  465. // cyncles through all the <div> tags and locate any that might be tabs.
  466. //
  467. function locateAvailableTabs(){
  468.     var divs = document.all.tags("div");
  469.     var key;
  470.     for(key in divs){
  471.         var div = divs[key];
  472.         if(div.tabName){    // this is a tag.  Try to add it to the tab collection for later use.
  473.             gaTabs[div.tabName] = gaTabs[gaTabs.length] = new CTabber(div);
  474.             div.style.display = "none";
  475.         }
  476.     }
  477. }
  478.  
  479. function restoreInitState(){
  480.     persistTab = goPersist.GetAttribute("selectedTab");
  481.     persistExpand = goPersist.GetAttribute("expanded");
  482.     persistScroll = goPersist.GetAttribute("scroll");
  483.     
  484.     if(gaTabs[persistTab]) gaTabs[persistTab].MakeActive(); else gaTabs[0].MakeActive();
  485.     if(persistExpand) toggleExpandDataView();
  486.     if(persistScroll) gaTabs[0].GetActiveTab().SetScrollPosition(persistScroll);
  487. }
  488.